import 'package:fate_blind_box/network/Api.dart';
import 'package:fate_blind_box/network/http_config.dart';
import 'package:fate_blind_box/theme/theme_color.dart';
import 'package:fate_blind_box/utils/loading.dart';
import 'package:fate_blind_box/utils/provider.dart';
import 'package:fate_blind_box/utils/snack_bar.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:qr_flutter/qr_flutter.dart';

class InviteUi extends StatelessWidget {
  const InviteUi({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const _InviteWidget  ();
  }
}

class _InviteWidget extends StatefulWidget {
  const _InviteWidget({Key? key}) : super(key: key);

  @override
  State<_InviteWidget> createState() => _InviteWidgetState();
}

class _InviteWidgetState extends State<_InviteWidget> {

  late Size _screenSize;
  double _bgHeight = 0;
  String _inviteCode = "";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _getQr();
  }

  @override
  Widget build(BuildContext context) {
    _screenSize = MediaQuery.of(context).size;
    _bgHeight = _screenSize.width / 25 * 27;
    return Scaffold(
      body: Stack(
        children: [
          Image.asset(
            "images/ic_qyc_bg.webp",
            width: _screenSize.width,
            height: _bgHeight,
          ),
          Column(
            children: _buildContent(),
          )
        ],
      ),
    );
  }

  Widget _buildTitleBar() {
    return Row(
      children: [
        GestureDetector(
          onTap: () { Navigator.of(context).pop(); },
          child: Container(
            padding: const EdgeInsets.only(left: 16),
            width: 56,
            height: 56,
            child: const Icon(
              Icons.arrow_back_ios,
              color: Colors.white,
              size: 24,
            ),
          ),
        ),
        Expanded(child: Container(
          alignment: Alignment.center,
          height: 56,
          margin: const EdgeInsets.only(right: 56),
          child: const Text(
            "邀请码",
            style: TextStyle(
              fontSize: 16,
              color: Colors.white,
            ),
          ),
        ))
      ],
    );
  }

  List<Widget> _buildContent() {
    return [
      _buildTitleBar(),
      SingleChildScrollView (
        physics: const BouncingScrollPhysics(),
        child: Column(
          children: [
            Container(
              alignment: Alignment.center,
              height: 40,
              child: const Text(
                "每成功邀请1位好友可获得 XX盲盒",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 14
                ),
              ),
            ),
            Stack(
              alignment: AlignmentDirectional.center,
              children: [
                Container(
                  height: 170 ,
                  width: _screenSize.width - 32,
                  margin: EdgeInsets.only(top: _bgHeight - 216),
                  decoration: const ShapeDecoration(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.vertical(top: Radius.circular(5))
                      ),
                      color: Color.fromARGB(112, 255, 255, 255)
                  )
                ),
                Container(
                  width: _screenSize.width - 64,
                  height: _bgHeight - 96,
                  margin: const EdgeInsets.symmetric(horizontal: 32),
                  decoration: const ShapeDecoration(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.vertical(top: Radius.circular(13))
                    ),
                    color: Colors.white,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      const SizedBox(height: 24,),
                      QrImageView(
                        data: _getQrInfo(),
                        version: QrVersions.auto,
                        size: 150,
                      ),
                      const SizedBox(height: 20,),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const Text(
                            "分享码",
                            style: TextStyle(
                              color: Color(0xFF666666),
                            ),
                          ),
                          const SizedBox(width: 12,),
                          Text(
                            _inviteCode.replaceAll("", " "),
                            style: const TextStyle(
                              color: Color(0xFFFB6D99),
                              fontSize: 18
                            ),
                          ),
                          const SizedBox(width: 12,),
                          GestureDetector(
                            onTap: () {
                              if (_inviteCode.isNotEmpty) {
                                ThemeSnackBar.show(context, "已复制到粘贴板");
                                Clipboard.setData(ClipboardData(
                                    text: _inviteCode
                                ));
                              }
                            },
                            child: Container(
                              alignment: AlignmentDirectional.center,
                              padding: const EdgeInsets.fromLTRB(12, 6, 12, 4),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(12),
                                border: Border.all(width: 1, color: ThemeColor.mainColor)
                              ),
                              child: Text(
                                "复制",
                                style: TextStyle(
                                  fontSize: 12,
                                  color: ThemeColor.mainColor
                                ),
                              ),
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                ),
                Positioned(
                  bottom: 0,
                  child: Container(
                    width: _screenSize.width - 32,
                    height: (_screenSize.width - 32) / 702 * 260,
                    decoration: const BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage("images/ic_yqs_bg.webp",)
                      )
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Column (
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                              alignment: AlignmentDirectional.center,
                              width: 32,
                              height: 32,
                              decoration: ShapeDecoration(
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(16),
                                  ),
                                  color: const Color(0x33FB6D99)
                              ),
                              child: Text("01", style: TextStyle(color: ThemeColor.mainColor, fontSize: 16),),
                            ),
                            const SizedBox(height: 12,),
                            Text("分享给好友", style: TextStyle(color: ThemeColor.textColor, fontSize: 14),)
                          ],
                        ),
                        Column (
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                              alignment: AlignmentDirectional.center,
                              width: 32,
                              height: 32,
                              child: Icon(Icons.more_horiz, color: ThemeColor.mainColor,),
                            ),
                            const SizedBox(height: 12,),
                            Text("", style: TextStyle(color: ThemeColor.textColor, fontSize: 14),)
                          ],
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                              alignment: AlignmentDirectional.center,
                              width: 32,
                              height: 32,
                              decoration: ShapeDecoration(
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(16),
                                  ),
                                  color: const Color(0x33FB6D99)
                              ),
                              child: Text("02", style: TextStyle(color: ThemeColor.mainColor, fontSize: 16),),
                            ),
                            const SizedBox(height: 12,),
                            Text("好友输入邀请码", style: TextStyle(color: ThemeColor.textColor, fontSize: 14),)
                          ],
                        ),
                        Column (
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                              alignment: AlignmentDirectional.center,
                              width: 32,
                              height: 32,
                              child: Icon(Icons.more_horiz, color: ThemeColor.mainColor,),
                            ),
                            const SizedBox(height: 12,),
                            Text("", style: TextStyle(color: ThemeColor.textColor, fontSize: 14),)
                          ],
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                              alignment: AlignmentDirectional.center,
                              width: 32,
                              height: 32,
                              decoration: ShapeDecoration(
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(16),
                                  ),
                                  color: const Color(0x33FB6D99)
                              ),
                              child: Text("03", style: TextStyle(color: ThemeColor.mainColor, fontSize: 16),),
                            ),
                            const SizedBox(height: 12,),
                            Text("盲盒到账", style: TextStyle(color: ThemeColor.textColor, fontSize: 14),)
                          ],
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
            const SizedBox(height: 60,),
            GestureDetector(
              onTap: () {
                if (_inviteCode.isNotEmpty) {
                  ThemeSnackBar.show(context, "邀请链接已复制到粘贴板，快去分享给好友吧！");
                  Clipboard.setData(ClipboardData(
                      text: _getQrInfo()
                  ));
                }
              },
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 24),
                height: 44,
                alignment: Alignment.center,
                decoration: ShapeDecoration(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(22)
                    ),
                    color: ThemeColor.mainColor
                ),
                child: const Text("分享给好友", style: TextStyle(color: Colors.white, fontSize: 14),),
              ),
            )
          ],
        ),
      )
    ];
  }

  String _getQrInfo() {
    return _inviteCode.isEmpty ? "" : HttpConfig.baseUrlProxy + "?inviteCode=$_inviteCode";//&inviteId=${Provider.memberId}";
  }

  _getQr() {
    loading(() async {
      final res = await Api.getInstance().getMemberInfo(Provider.memberId);
      if (res?['data']?['shareCode']?.toString()?.isNotEmpty == true) {
        setState(() {
          _inviteCode = res['data']['shareCode'];
        });
      } else {
        toast("获取邀请码失败！");
      }
    });
  }
}

